<template>
  <div class="app-container">
    <el-form :model="queryParams"
             ref="queryForm"
             size="small"
             :inline="true"
             v-show="showSearch"
             label-width="68px">
      <el-form-item label="合同编号"
                    prop="contractNo">
        <el-input v-model="queryParams.contractNo"
                  placeholder="请输入合同编号"
                  clearable
                  @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="客户id"
                    prop="customerId">
        <el-input v-model="queryParams.customerId"
                  placeholder="请输入客户id"
                  clearable
                  @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="员工id"
                    prop="empId">
        <el-input v-model="queryParams.empId"
                  placeholder="请输入员工id"
                  clearable
                  @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="业务类型字典"
                    prop="contractCaseTypeId">
        <el-input v-model="queryParams.contractCaseTypeId"
                  placeholder="请输入业务类型字典"
                  clearable
                  @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="代理服务费"
                    prop="contractServiceCost">
        <el-input v-model="queryParams.contractServiceCost"
                  placeholder="请输入代理服务费"
                  clearable
                  @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="官方费用"
                    prop="contractThirdCost">
        <el-input v-model="queryParams.contractThirdCost"
                  placeholder="请输入官方费用"
                  clearable
                  @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="专利id"
                    prop="patendId">
        <el-input v-model="queryParams.patendId"
                  placeholder="请输入专利id"
                  clearable
                  @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="合同状态"
                    prop="contractStatusId">
        <el-input v-model="queryParams.contractStatusId"
                  placeholder="请输入合同状态"
                  clearable
                  @keyup.enter.native="handleQuery" />
      </el-form-item>
      <!-- <el-form-item label="乐观锁"
                    prop="version">
        <el-input v-model="queryParams.version"
                  placeholder="请输入乐观锁"
                  clearable
                  @keyup.enter.native="handleQuery" />
      </el-form-item> -->
      <!-- <el-form-item label="逻辑删除(0表示未删除、1表示删除)"
                    prop="isDelete">
        <el-input v-model="queryParams.isDelete"
                  placeholder="请输入逻辑删除(0表示未删除、1表示删除)"
                  clearable
                  @keyup.enter.native="handleQuery" />
      </el-form-item> -->
      <br>
      <el-form-item>
        <el-button type="primary"
                   icon="el-icon-search"
                   size="mini"
                   @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh"
                   size="mini"
                   @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10"
            class="mb8">
      <el-col :span="1.5">
        <el-button type="primary"
                   plain
                   icon="el-icon-plus"
                   size="mini"
                   @click="handleAdd"
                   v-hasPermi="['system:contract:add']">新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="success"
                   plain
                   icon="el-icon-edit"
                   size="mini"
                   :disabled="single"
                   @click="handleUpdate"
                   v-hasPermi="['system:contract:edit']">修改</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="danger"
                   plain
                   icon="el-icon-delete"
                   size="mini"
                   :disabled="multiple"
                   @click="handleDelete"
                   v-hasPermi="['system:contract:remove']">删除</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="warning"
                   plain
                   icon="el-icon-download"
                   size="mini"
                   @click="handleExport"
                   v-hasPermi="['system:contract:export']">导出</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch"
                     @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading"
              :data="contractList"
              @selection-change="handleSelectionChange">
  
      <el-table-column type="selection"
                       width="55"
                       align="center" />
    <el-table-column label="操作"
                       align="center"
                       class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button size="mini"
                     type="text"
                     icon="el-icon-edit"
                     @click="handleUpdate(scope.row)"
                     v-hasPermi="['system:contract:edit']">修改</el-button>
          <el-button size="mini"
                     type="text"
                     icon="el-icon-delete"
                     @click="handleDelete(scope.row)"
                     v-hasPermi="['system:contract:remove']">删除</el-button>
          <el-button size="mini"
                     type="text"
                     icon="el-icon-view"
                     @click="handleDetails(scope.row)">详情</el-button>
        </template>
      </el-table-column>

      <el-table-column label="合同ID"
                       align="center"
                       prop="contractId" />
      <el-table-column label="合同编号"
                       align="center"
                       prop="contractNo">

      </el-table-column>

      <el-table-column label="客户ID"
                       align="center"
                       prop="customerId" />
      <el-table-column label="员工ID"
                       align="center"
                       prop="empId" />

      <!-- <el-table-column label=""
                       align="center"
                       prop="patendTypeId"
                       width="60"
                       :formatter="formatPatentType"
                       :show-overflow-tooltip="true" /> -->

      <el-table-column label="业务类型字典"
                       align="center"
                       prop="contractCaseTypeId"
                       :formatter="formatContractCaseType" />

      <el-table-column label="代理服务费"
                       align="center"
                       prop="contractServiceCost" />
      <el-table-column label="官方费用"
                       align="center"
                       prop="contractThirdCost" />
      <el-table-column label="专利ID"
                       align="center"
                       prop="patendId" />
      <el-table-column label="合同状态"
                       align="center"
                       prop="contractStatusId"
                       :formatter="formatContractStatusType" />
      <!-- <el-table-column label="乐观锁"
                       align="center"
                       prop="version" />
      <el-table-column label="逻辑删除(0表示未删除、1表示删除)"
                       align="center"
                       prop="isDelete" /> -->

    </el-table>

    <pagination v-show="total>0"
                :total="total"
                :page.sync="queryParams.pageNum"
                :limit.sync="queryParams.pageSize"
                @pagination="getList" />

    <!-- 添加或修改合同对话框 -->
    <el-dialog :title="title"
               :visible.sync="open"
               width="500px"
               append-to-body>
      <el-form ref="form"
               :model="form"
               :rules="rules"
               label-width="80px">
        <el-form-item label="合同编号"
                      prop="contractNo">
          <el-input v-model="form.contractNo"
                    placeholder="请输入合同编号" />
        </el-form-item>
        <el-form-item label="客户"
                      prop="customerId">
          <el-input v-model="form.customerId"
                    placeholder="请输入客户id" />
        </el-form-item>
        <el-form-item label="员工"
                      prop="empId">
          <el-input v-model="form.empId"
                    placeholder="请输入员工id" />
        </el-form-item>
        <el-form-item label="业务类型"
                      prop="contractCaseTypeId">
          <el-input v-model="form.contractCaseTypeId"
                    placeholder="请输入业务类型字典" />
        </el-form-item>
        <el-form-item label="代理服务费"
                      prop="contractServiceCost">
          <el-input v-model="form.contractServiceCost"
                    placeholder="请输入代理服务费" />
        </el-form-item>
        <el-form-item label="官方费用"
                      prop="contractThirdCost">
          <el-input v-model="form.contractThirdCost"
                    placeholder="请输入官方费用" />
        </el-form-item>
        <el-form-item label="专利"
                      prop="patendId">
          <el-input v-model="form.patendId"
                    placeholder="请输入专利id" />
        </el-form-item>
        <el-form-item label="合同状态"
                      prop="contractStatusId">
          <el-input v-model="form.contractStatusId"
                    placeholder="请输入合同状态" />
        </el-form-item>
        <el-form-item label="乐观锁"
                      prop="version">
          <el-input v-model="form.version"
                    placeholder="请输入乐观锁" />
        </el-form-item>
        <el-form-item label="逻辑删除(0表示未删除、1表示删除)"
                      prop="isDelete">
          <el-input v-model="form.isDelete"
                    placeholder="请输入逻辑删除(0表示未删除、1表示删除)" />
        </el-form-item>
      </el-form>
      <div slot="footer"
           class="dialog-footer">
        <el-button type="primary"
                   @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  listContract,
  getContract,
  delContract,
  addContract,
  updateContract,
} from '@/api/contract/lu'

export default {
  dicts: [
    //专利类型字典
    'ipms_patend_type',
    'ipms_contract_case_type',
    'ipms_contract_status',
  ],
  name: 'Contract',
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 合同表格数据
      contractList: [],
      // 弹出层标题
      title: '',
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        contractNo: null,
        customerId: null,
        empId: null,
        contractCaseTypeId: null,
        contractServiceCost: null,
        contractThirdCost: null,
        patendId: null,
        contractStatusId: null,
        version: null,
        isDelete: null,
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {},
    }
  },
  created() {
    this.getList()
  },
  methods: {
    //字典翻译
    formatContractCaseType(row) {
      return this.selectDictLabel(
        this.dict.type.ipms_contract_case_type,
        row.contractCaseTypeId
      )
    },
    formatContractStatusType(row) {
      return this.selectDictLabel(
        this.dict.type.ipms_contract_status,
        row.contractStatusId
      )
    },

    /** 查询合同列表 */
    getList() {
      this.loading = true
      listContract(this.queryParams).then((response) => {
        this.contractList = response.rows
        this.total = response.total
        this.loading = false
      })
    },
    // 取消按钮
    cancel() {
      this.open = false
      this.reset()
    },
    // 表单重置
    reset() {
      this.form = {
        contractId: null,
        contractNo: null,
        customerId: null,
        empId: null,
        contractCaseTypeId: null,
        contractServiceCost: null,
        contractThirdCost: null,
        patendId: null,
        contractStatusId: null,
        version: null,
        isDelete: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
      }
      this.resetForm('form')
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm('queryForm')
      this.handleQuery()
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.contractId)
      this.single = selection.length !== 1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset()
      this.open = true
      this.title = '添加合同'
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset()
      const contractId = row.contractId || this.ids
      getContract(contractId).then((response) => {
        this.form = response.data
        this.open = true
        this.title = '修改合同'
      })
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          if (this.form.contractId != null) {
            updateContract(this.form).then((response) => {
              this.$modal.msgSuccess('修改成功')
              this.open = false
              this.getList()
            })
          } else {
            addContract(this.form).then((response) => {
              this.$modal.msgSuccess('新增成功')
              this.open = false
              this.getList()
            })
          }
        }
      })
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const contractIds = row.contractId || this.ids
      this.$modal
        .confirm('是否确认删除合同编号为"' + contractIds + '"的数据项？')
        .then(function () {
          return delContract(contractIds)
        })
        .then(() => {
          this.getList()
          this.$modal.msgSuccess('删除成功')
        })
        .catch(() => {})
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download(
        'system/contract/export',
        {
          ...this.queryParams,
        },
        `contract_${new Date().getTime()}.xlsx`
      )
    },
    
    //查看合同详情
    handleDetails(row) {
      // console.log('row',row);
      this.$store.commit("SET_CONTRACT_OBJ", row);
      //跳转合同详情页面
      this.$router.push({
          path:'/contract/details',
        })
    },
  },
}
</script>